<!--中译英界面-->
<template>
  <div style="margin:10px;padding:50px; background-image: url('../../static/image/background.jpg');background-size: cover" >
    <div>
      <el-row >
        <el-col :span="12">
          <el-page-header @back="goBack" content="中译英模式"></el-page-header>
        </el-col><!--头部左侧返回-->
        <el-col :span="2" :offset="10"><!--头部右侧提示-->
          <el-popover
            placement="top"
            width="160"
            v-model="visible">
            <p>欢迎使用中译英模式!</p>
            <p>请你根据中文意思选择正确的选项补全单词！</p>
            <div style="text-align: right;">
              <el-button type="info"  @click="visible = false">确定</el-button>
            </div>
            <el-button slot="reference">模式说明</el-button>
          </el-popover>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row>
        <el-col :span="12" :offset="6">
          <el-card shadow="always">
            <el-container>
              <el-header style="text-align: center"><p style="font-size: large;font-family: 宋体;" v-text="word.chinese"></p></el-header>
              <el-main class="el-main-1" ><p style="font-size: large;font-family: 宋体;" v-text="word.english"></p></el-main>
              <el-main class="el-main-2">
                <el-row>
                  <el-col :span="9":offset="6">
                    <el-button id="A" type="primary" @click="selectA" plain >A</el-button>
                    <span style="font-family: 宋体;font-size: large" v-text="answerA"></span>
                  </el-col>
                  <el-col :span="9">
                    <el-button id="B" type="primary" @click="selectB" plain>B</el-button>
                    <span style="font-family: 宋体;font-size: large" v-text="answerB"></span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="9" :offset="6">
                    <el-button id="C" type="primary" @click="selectC" plain> C</el-button>
                    <span style="font-family: 宋体;font-size: large" v-text="answerC">hhh</span>
                  </el-col>
                  <el-col :span="9">
                    <el-button id="D" type="primary" @click="selectD" plain>D</el-button>
                    <span style="font-family: 宋体;font-size: large" v-text="answerD">hhh</span>
                  </el-col>
                </el-row>
              </el-main>
              <el-footer>
                <el-button type="info" @click="nextWord" >获取单词</el-button>
                <!--                <i class="el-icon-arrow-right el-icon&#45;&#45;right"></i>-->
                <!--                <el-button type="info" @click="isRight">提交选项</el-button>-->
              </el-footer>
            </el-container>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {post,get} from "../common/serviceUtil";
import Vue from "vue";

function getTopic(english) {
  var txt = english
  var len = txt.length
  var topic = []
  var returnAnswer = []
  topic=txt.split("")
  var num = Math.floor(Math.random() * (len-2))+1
  var answer = topic[num]
  var answer1 = topic[num+1]
  answer+=answer1
  topic[num] = "_"
  topic[num+1] = "_"
  returnAnswer[0] = topic.join("")//题目
  returnAnswer[1] = answer//答案
  return returnAnswer
}//获取题目和答案

function setAnswer(answer){
  var answerArray = []//存放一个正确答案和三个错误答案的数组
  //1到4存入选项，5存入正确答案所在的选项
  var num = Math.floor(Math.random() * 4)+1//1到4号选项随机生成一个，存入正确答案
  var str = ""
  answerArray[num] = answer
  for(var j = 1;j<=4;j++){
    if(j !==num){
      for(var i = 0;i<2;i++){
        str += String.fromCharCode(
          Math.floor(Math.random() * 26)+"a".charCodeAt(0)
        )
      }
      answerArray[j] = str
      str=""
    }
  }
  answerArray[5] = num
  return answerArray
}//将答案随机放入四个选项之一，并生成三个错误答案

function postId(){
  var me = this
  me.$axios({
    url:"/report",
    method:"post",
    data:me.word.id
  })
}

export default {
  name: "ChineForEnglish",
  methods: {
    goBack() {
      this.$router.replace('/ReciteWord')
    },
    nextWord(){
      var that = this;
      get("/reviewWordChineseToEnglish").then(function (res) {
        if(res.data.data.msg!=="今天已经没有单词可背了！") {
          var topicAndAnswer = []//存入题目和正确答案，0为题目，1为答案
          topicAndAnswer = getTopic(res.data.data.english)
          that.word.english=topicAndAnswer[0]
          that.word.answer = topicAndAnswer[1]
          var option =[];
          option = setAnswer(that.word.answer)//获取选项
          that.answerA = option[1]
          that.answerB = option[2]
          that.answerC = option[3]
          that.answerD = option[4]
          that.correctOptions = option[5]//存入正确答案所在的位置
          that.word.chinese = res.data.data.chinese
          that.word.id = res.data.data.id
          that.word.sent = res.data.data.sent
        }
      })
    },
    selectA(){
      if(this.correctOptions === 1){
        alert("恭喜你！选择了正确答案，请学习下一个吧！")
      }
      else{
        alert("你选错！请选择选择")
      }
    },
    selectB(){
      if(this.correctOptions === 2){
        alert("恭喜你！选择了正确答案，请学习下一个吧！")
      }
      else{
        alert("你选错！请选择选择")
      }
    },
    selectC(){
      if(this.correctOptions === 3){
        alert("恭喜你！选择了正确答案，请学习下一个吧！")
      }
      else{
        alert("你选错！请选择选择")
      }
    },
    selectD(){
      if(this.correctOptions === 4){
        alert("恭喜你！选择了正确答案，请学习下一个吧！")
      }
      else{
        alert("你选错！请选择选择")
      }
    },
  },
  data() {
    return {
      visible: false,
      word:{
        english :"",//由后端返回的单词生成的题目
        chinese :"",//后端返回的单词词义
        id:"",//后端返回的单词ID
        sent:"",//后端返回的单词音标
        answer:""//由单词生成的答案
      },
      answerA:"",
      answerB:"",
      answerC:"",
      answerD:"",
      correctOptions:""
    };
  }
}
</script>

<style scoped>
.el-header{
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main-1 {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}
.el-main-2 {
  background-color: #B3C0D1;
  color: #333;
  line-height: 90px;
}
.el-footer{
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 60px;
}
</style>
